<script>
	$(document).ready(function(){
/* CHANGE TEXT SETTING */
		$("#h3_page_title").text("Kategori");
		$("#breadcrumb_title").html("Kategori");
/* END CHANGE TEXT SETTING */
/* DECLARE VARIABLE */
		var theme = "fresh";
		var kategori_grid = $("#kategori_grid");
		var kategori_windowaddedit = $("#kategori_windowaddedit");
		var kategori_addeditform = $("#kategori_addeditform");
		var kategori_actionfield = $("#kategori_actionfield");
		var kategori_idfield = $("#kategori_idfield");
		var kategori_namafield = $("#kategori_namafield");
		var kategori_keteranganfield = $("#kategori_keteranganfield");
		var kategori_buttonsave = $("#kategori_buttonsave");
		var kategori_buttonreset = $("#kategori_buttonreset");
/* END DECLARE VARIABLE */
/* SETTING VALIDATOR */
	kategori_addeditform.jqxValidator({
		theme : theme,
		rules : [
			{ input: '#kategori_namafield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#kategori_keteranganfield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
		]
	});
/* END SETTING VALIDATOR */
/* SETTING THEME AND TYPE */
	// button type
		kategori_buttonreset.jqxButton({ theme : theme, width : 100, height : 25});
		kategori_buttonsave.jqxButton({ theme : theme, width : 100, height : 25});
	// grid type
		var kategori_listsource = {
			id : 'kategori_listsource',
			url : 'c_kategori/data_kategori?key=',
			datatype : 'json',
			root : 'results',
			datafields : [
				{ name : 'kategori_id'},
				{ name : 'kategori_nama'},
				{ name : 'kategori_keterangan'}
			]
		}
		var kategori_listadapter = new $.jqx.dataAdapter(kategori_listsource);
		kategori_grid.jqxGrid({
			theme : theme,
			width : 800,
			source : kategori_listadapter,
			filterable : true,
			autoheight : true,
			sortable : true,
			pageable : true,
			showtoolbar : true,
			toolbarHeight : 40,
			columns : [
				{ text : 'Nama Kategori', datafield : 'kategori_nama', width : 200, align : 'center'},
				{ text : 'Id Kategori', datafield : 'kategori_id', width : 100, hidden : true},
				{ text : 'Keterangan', datafield : 'kategori_keterangan', align : 'center'}
			],
			rendertoolbar : function(toolbar){
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				var kategori_add = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='kategori_addbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/add.png'><span style='margin-left:10px;'>Tambah</span></div>");
				var kategori_edit = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='kategori_editbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/edit.png'><span style='margin-left:10px;'>Ubah</span></div>");
				var kategori_delete = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='kategori_deletebutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/delete.png'><span style='margin-left:10px;'>Hapus</span></div>");
				var kategori_searchtext = $("<input type='text' class='jqx-input jqx-rc-all' id='kategori_searchtext' style='height:27px; float:left;'>");
				var kategori_search = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='kategori_searchbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/search.png'><span style='margin-left:10px;'>Cari</span></div>");
				var kategori_refresh = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='kategori_refreshbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/refresh.png'><span style='margin-left:10px;'>Refresh</span></div>");
				toolbar.append(container);
				container.append(kategori_add);
				container.append(kategori_edit);
				container.append(kategori_delete);
				container.append(kategori_searchtext);
				container.append(kategori_search);
				container.append(kategori_refresh);
				kategori_add.click(function(){
					reset_form();
					kategori_actionfield.val("kategori_add");
					kategori_windowaddedit.jqxWindow('open');
				});
				kategori_edit.click(function(){
					var rowindex = kategori_grid.jqxGrid('getselectedrowindex');
					var record = kategori_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						kategori_actionfield.val("kategori_edit");
						kategori_idfield.val(record.kategori_id);
						kategori_namafield.val(record.kategori_nama);
						kategori_keteranganfield.val(record.kategori_keterangan);
						kategori_windowaddedit.jqxWindow('open');
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				kategori_delete.click(function(){
					var rowindex = kategori_grid.jqxGrid('getselectedrowindex');
					var record = kategori_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						var kategori_id = record.kategori_id;
						if(window.confirm('Apakah anda yakin menghapus data ini ?')){
							$.ajax({
								url : 'c_kategori/action',
								type : 'POST',
								data : {
									kategori_id : kategori_id,
									action : 'kategori_delete'
								},success : function(msg){
									var result = eval(msg);
									if(msg == 1){
										show_alert("Save Success...", "Data berhasil disimpan...");
										refresh_grid();
									}else{
										show_alert("Save Failed...", "Data gagal disimpan...");
									}
								}
							});
						}
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				kategori_search.click(function(){
					var key = kategori_searchtext.val();
					kategori_listsource['url'] = 'c_kategori/data_kategori?key=' + key;
					kategori_listadapter.dataBind();
				});
				kategori_refresh.click(function(){
					kategori_searchtext.val('');
					kategori_listsource['url'] = 'c_kategori/data_kategori?key=';
					kategori_grid.jqxGrid('updatebounddata');
				});
			}
		});
	// window type
		kategori_windowaddedit.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 400,
			height : 400,
			isModal : true,
			cancelButton : kategori_buttonreset
		});
/* END SETTING THEME AND TYPE */
/* DECLARE FUNCTION */
		function refresh_grid(){
			kategori_grid.jqxGrid('updatebounddata');
		}
		function reset_form(){
			kategori_actionfield.val('');
			kategori_idfield.val('');
			kategori_namafield.val('');
			kategori_keteranganfield.val('');
			kategori_addeditform.jqxValidator('hide');
		}
	// Function onclick button
		kategori_buttonreset.click(function(){
			reset_form();
		});
		kategori_buttonsave.click(function(){
			var kategori_id = "";
			var kategori_nama = "";
			var kategori_keterangan = "";
			var kategori_action = "";
			kategori_id = kategori_idfield.val();
			kategori_nama = kategori_namafield.val();
			kategori_keterangan = kategori_keteranganfield.val();
			kategori_action = kategori_actionfield.val();
			$.ajax({
				url : 'c_kategori/action',
				type : 'POST',
				data : {
					kategori_id : kategori_id,
					kategori_nama : kategori_nama,
					kategori_keterangan : kategori_keterangan,
					action : kategori_action
				},success : function(msg){
					var result = eval(msg);
					if(msg == 1){
						kategori_windowaddedit.jqxWindow('close');
						show_alert("Save Success...", "Data berhasil disimpan...");
						refresh_grid();
					}else{
						show_alert("Save Failed...", "Data gagal disimpan...");
					}
				}
			});
		});
/* END DECLARE FUNCTION */
/* DECLARE ALERT WINDOW */
		var kategori_alertwindow = $("#kategori_alertwindow");
		var kategori_alertheader = $("#kategori_alertheader");
		var kategori_alertcontent = $("#kategori_alertcontent");
		var kategori_alertbutton = $("#kategori_alertbutton");
		kategori_alertbutton.jqxButton({ theme : theme, width : 100, height : 25});
		kategori_alertwindow.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 300,
			height : 150,
			isModal : true,
			okButton : kategori_alertbutton
		});
		function show_alert(header, content){
			kategori_alertheader.html(header);
			kategori_alertcontent.html(content);
			kategori_alertwindow.jqxWindow('open');
		}
/* END DECLARE ALERT WINDOW */
	});
</script>
<div id="kategori_content">
	<div class="row-fluid">
		<div class="span8">
			<div id="kategori_grid"></div>
			<div id="kategori_windowaddedit" class="must_empty">
				<div>Form tambah / ubah kategori</div>
				<div>
					<form id="kategori_addeditform">
						<input type="hidden" id="kategori_actionfield">
						<input type="hidden" id="kategori_idfield">
						<table>
							<tr>
								<td>Nama Kategori</td>
								<td><input type="text" id="kategori_namafield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td>Keterangan Kategori</td>
								<td><textarea id="kategori_keteranganfield" style="height:70px;width:202px;"></textarea></td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="button" id="kategori_buttonsave" value="Simpan">
									<input type="reset" id="kategori_buttonreset" value="Reset">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="kategori_alertwindow">
		<div id="kategori_alertheader"></div>
		<div>
			<div id="kategori_alertcontent" style="height:80px;"></div>
			<input type="button" id="kategori_alertbutton" value="OK" style="margin-left:100px;" />
		</div>
	</div>
</div>